<template>
	<div class="testSituation">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/main/classes/classesList' }">我的班级</el-breadcrumb-item>
			<el-breadcrumb-item><a @click="$router.go(-1)">{{releaseInfo.classesName}}</a></el-breadcrumb-item>
			<el-breadcrumb-item>{{releaseInfo.examName}}</el-breadcrumb-item>
			<el-breadcrumb-item>查看考试情况</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="list-header" v-loading="loading">
			<div class="classesGrade">
				<div class="tital">
					<h2>C{{ releaseInfo.examId }}&nbsp;&nbsp; {{ releaseInfo.examName }} </h2>
				</div>
				<div class="details">
					<ul>
						<li class="item"> <span class="key">考试时间：</span>{{ releaseInfo.startDate + ' 至 ' + releaseInfo.deadline }} </li>
						<li class="item"> <span class="key">公布答案：</span>{{ releaseInfo.publishAnswer ? '是':'否' }} </li>
						<li class="item"> <span class="key">公布分数：</span>{{ releaseInfo.publishScore ? '是':'否' }}</li>
						<li class="item"> <span class="key">及格分数：</span>{{ releaseInfo.passMark }}</li>
					</ul>
					<ul>
						<li class="item"> <span class="key">试卷提交情况：</span>{{ commitNumber }} / {{ userGradeList.length }}</li>
						<li class="item"> <span class="key">批改进度：</span>{{ markNumber }} / {{ userGradeList.length }}</li>
						<li class="item"> <span class="key">平均分：</span>{{ releaseInfo.average }}</li>
						<li class="item"> <span class="key">合格率：</span>{{ releaseInfo.passRate }}%</li>
					</ul>
				</div>
			</div>
			<div class="charts">
				<!-- <div id="myChart" :style="{width: '400px', height: '300px'}"></div>
        <div id="myChart2" :style="{width: '300px', height: '200px'}"></div> -->
			</div>
		</div>
		<!-- 班级成员考试情况表格 -->
		<div class="user_list table">
			<el-table :data="userGradeList" style="width: 100%" v-loading="loading">
				<el-table-column label="用户id">
					<template slot-scope="scope">U{{scope.row.userId}} </template>
				</el-table-column>
				<el-table-column prop="relaname" label="成员名称"> </el-table-column>
				<el-table-column prop="answerDate" label="答题日期" width="184"> </el-table-column>
				<el-table-column prop="answerTime" label="答题用时">
					<template slot-scope="scope">{{scope.row.answerTime | formatSeconds}} </template>
				</el-table-column>
				<el-table-column label="答题状态">
					<template slot-scope="scope">{{scope.row.examStatus == 1? '已完成':'未完成'}} </template>
				</el-table-column>
				<el-table-column prop="grade" label="得分"> </el-table-column>
				<el-table-column prop="gradeAuto" label="自动评改得分"> </el-table-column>
				<el-table-column label="批改状态">
					<template slot-scope="scope">{{scope.row.markStatus == 1? '批改完成':'待批改'}} </template>
				</el-table-column>
				<el-table-column prop="operate" label="操作" width="300">
					<template slot-scope="scope">
						<el-button type="primary" size="small" v-if="scope.row.examStatus == 1 " @click="openPaper(scope.row.classesId, scope.row.userId,scope.row.examId)"
						 plain>
							<!-- {{scope.row.markStatus == 1 ? '查看试卷':'审批试卷'}} --> 审批试卷 </el-button>
						<el-button type="primary" size="small" v-if="scope.row.markStatus == 1" plain>
							已批改 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page">
			<el-pagination background layout="total, prev, pager, next,jumper" @current-change="currentChange" :total="total"
			 :page-size="pageSize" />
		</div>
	</div>
</template>
<script>
	// 引入基本模板
	import axios from "@/utils/axiosutils.js"
	let echarts = require("echarts/lib/echarts");
	export default {
		name: "TestSituation",
		data() {
			return {
				classesId: this.$route.query.cId,
				examId: this.$route.query.tpId,
				userGradeList: [],
				releaseInfo: {},
				commitNumber: 0, // 完成人数
				markNumber: 0, // 批改完成人数
				//分页
				currentPage: 1,
				pageSize: 10,
				total: null,
				loading: false,
			};
		},
		computed: {},
		async mounted() {
			await this.getReleaseInfo();
			await this.getUserGradeList();
			// this.drawLine();
			// this.drawLine2();
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById("myChart"));
				// 绘制图表
				myChart.setOption({
					color: ['#5197dc'],
					title: {},
					tooltip: {},
					xAxis: {
						data: ["未完成", "不及格", "及格", "良好", "优秀"],
					},
					yAxis: {},
					series: [{
						name: "人数",
						type: "bar",
						data: [22, 5, 20, 36, 10],
					}, ],
				});
			},
			drawLine2() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById("myChart2"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: "item",
					},
					legend: {
						top: "0%",
						left: "center",
					},
					series: [{
						name: "人数",
						type: "pie",
						radius: ["40%", "70%"],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: "#fff",
							borderWidth: 2,
						},
						label: {
							show: false,
							position: "center",
						},
						emphasis: {
							label: {
								show: true,
								fontSize: "20",
								fontWeight: "bold",
							},
						},
						labelLine: {
							show: false,
						},
						data: [{
							value: 1048,
							name: "及格"
						}, {
							value: 735,
							name: "不及格"
						}, {
							value: 580,
							name: "未完成"
						}, ],
					}, ],
				});
			},
			getUserGradeList() {
				this.loading = true;
				let params = {
					classesId: this.classesId,
					examId: this.examId,
					pageSize: this.pageSize,
					currentPage: this.currentPage,
				};
				setTimeout(() => {
					axios.get("markExam/getUserGradeList", res => {
						this.userGradeList = res.obj.content;
						this.total = res.obj.total;
						this.loading = false;
						this.userGradeList.map((t) => {
							if (t.examStatus === 1) this.commitNumber++;
							if (t.markStatus === 1) this.markNumber++;
						});
					}, params)
				})
			},
			// 获取试卷发布信息
			getReleaseInfo() {
				let params = {
					classesId: this.classesId,
					examId: this.examId,
				};
				axios.get("releaseExam/getReleaseInfo", res => {
					res.obj.average = res.obj.average.toFixed(1)
					res.obj.passRate = res.obj.passRate.toFixed(2)
					this.releaseInfo = res.obj;
				}, params)
			},
			// 批改试卷
			openPaper(classesId, userId, examId) {
				let {
					href
				} = this.$router.resolve({
					path: "/markTestPaper",
					query: {
						cId: classesId,
						eId: examId,
						uId: userId
					},
				});
				console.log(href);
				window.open(href, "_blank");
			},
			//切换分页时触发
			currentChange(val) {
				this.currentPage = val;
				this.getUserGradeList();
			},
		},
	};
</script>
<style lang="less" scoped>
	.testSituation {
		padding: 24px;

		.el-breadcrumb {
			font-size: 16px;
			padding: 0 16px 16px 16px;
		}

		.list-header {
			margin-bottom: 24px;
			background: #fafafa;
		}

		.list-header .classesGrade {
			padding: 0 24px;
			display: flex;

			.tital {
				width: 30%;
				margin-top: 12px;
			}

			.details {
				width: 70%;
				padding-top: 12px;
			}

			ul {
				margin: 12px 0 16px;
				display: flex;
				align-items: center;
			}

			ul li {
				padding-right: 24px;
			}

			ul li.item .key {
				color: #606266;
			}
		}

		.list-header .charts {
			display: flex;
			justify-content: space-between;
			padding: 0 24px;
		}
	}
</style>
